<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论展开收缩效果</title>
    <link rel="stylesheet" href="./xuniList.css">
</head>

<body>
    <div class="comment">
        <div class="comment-header" onclick="toggleComment()">
            <span class="comment-author">用户123</span>
            <span class="comment-time">2025-01-03 10:00</span>
        </div>
        <div class="comment-body">
            <p>
                这是评论内容的一部分，初始时只显示这一部分。点击展开查看更多内容。这段评论可以包含很多字，
                但初始状态下它只会显示一小部分，剩余内容会被隐藏。点击时，评论框会自动展开，显示完整的评论内容。
            </p>
            <p>
                这是一段额外的评论内容，只有在展开时才会显示。动态计算的高度确保了内容完全显示而不被切割。
            </p>
            <p>
                如果评论内容非常长，展开后的评论区域会自动调整为适合显示所有内容的高度，而无需提前设定一个固定的最大高度。
            </p>
        </div>
    </div>

    <script>
        function toggleComment() {
            const commentBody = document.querySelector('.comment-body');

            // 检查评论框是否已经展开
            if (commentBody.classList.contains('expanded')) {
                // 如果已经展开，收缩评论框
                console.log("关闭");
                commentBody.style.maxHeight = `${commentBody.scrollHeight}px`;
                setTimeout(() => {
                    commentBody.classList.remove("expanded")
                    commentBody.style.maxHeight = '0px'; // 恢复到初始的最大高度
                }, 300); // 等待过渡结束后再设置固定高度
            } else {
                // 如果没有展开，获取内容的高度并展开
                commentBody.style.maxHeight = `${commentBody.scrollHeight}px`;
                console.log("展开");
                
                setTimeout(() => {
                    commentBody.classList.add('expanded');
                    commentBody.style.maxHeight = 'none'; // 展开后不限制高度
                }, 300); // 等待过渡结束后设置最大高度为auto
            }

            // commentBody.classList.toggle('expanded');
        }
    </script>
</body>

</html>